<template>
    <view class="container d-flex-column j-center a-center" >
        <view class="white-content d-flex-column j-sb a-center" :class="showAnimation ? 'fadeInAnimation' :'fadeOutAnimation' ">
            <view class="title" v-if="isHasValue(title)">{{ title }}</view>
            <view class="msg"  v-if="isHasValue(msg)" :class="isHasValue(title) === false ? 'mt-40' : 'mt-20'">{{ msg }}</view>

            <view class="line"></view>
            <view class="bottom d-flex j-space-around a-center">
                <view class="cancel btn" v-if="noCancel === false" @click="cancelAction">{{ cancelName }}</view>
                <view class="confirm btn" @click="confirmAction">{{ confirmName }}</view>
            </view>
        </view>
    </view>
    
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    props:{
        title:{
            type:String,
            default:'',
        },
        msg:{
            type:String,
            default:'',
        },
        noCancel:{
            type:Boolean,
            default:false,
        },
        cancelName:{
            type:String,
            default:'取消',
        },
        confirmName:{
            type:String,
            default:'确定',
        },
        cancelCallback:{
            type:String,
            default:null as any,
        },
        confirmCallback:{
            type:Function,
            default:null as any,
        }
    },
    data(){
        return {
            showAnimation:false,
            isshow:false,


        }
    },
    mounted(){
        this.isshow = true
        this.showAnimation = true
    },
    methods:{
        isHasValue(value:any){
            if(value === null){
                return false
            }

            if(value === 'undefined'){
                return false
            }

            if(typeof(value) === 'undefined'){
                return false
            }
            if(value.length > 0){
                return true
            }
            return false
        },
        confirmAction(){

            this.showAnimation = false
            setTimeout(() => {
                this.isshow = false;
                (this as any).$emit('confirmCallback')

            }, 100);
            
            
        },
        cancelAction(){
            this.showAnimation = false
            setTimeout(() => {
                this.isshow = false;
                (this as any).$emit('cancelCallback')
            }, 100);
        }
    }
})
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
        left:0;
        background-color: rgba($color: #000000, $alpha: 0.5);
        z-index: 10;
        // visibility: hidden;


   @keyframes fadein {
    0% {
        opacity: 0;
        visibility: hidden;
     }
     100% {
        opacity: 1;
        visibility: visible;
     }
   }

   @keyframes fadeout {
    0% {
        opacity: 1;
        visibility: visible;
     }
     100% {
        opacity: 0;
        visibility: hidden;
     }
   }

   .fadeInAnimation{
    animation: fadein 0.1s;
   }

   .fadeOutAnimation{
    animation: fadeout 0.2s;
   }

    .white-content{
        background-color: white;
        width: 300px;
        // height: 200px;
        border-radius: 8px;
        padding: 15px;
        // box-shadow: 0 0 5px #9e9e9e;

        .title{
            font-size: 17px;
            font-weight: bold;
            color: #333;
            margin-top: 15px;
        }
        .msg{
            font-size: 17px;
            color: #666666;
            line-height: 17px;
            margin-left: 20px;
            margin-right: 20px;
        }

        .line{
            background-color: #e4e4e4;
            margin: 30px 0px 0px;
            width: 100%;
            height: 1px;

        }
        .bottom{
            width: 100%;
            margin-bottom: 0px;
            margin-top: 10px;
            .btn{
                
                width: 105px;
                height: 40px;
                line-height: 40px;
                border-radius: 10px;
                font-size: 17px;
                font-weight: bold;
                text-align: center;
                // color: #fff;

            }
            .cancel{
                // background-color: #969696;
                color:#777777;
            }

            .confirm{
                // background-color: #009DFF;
                color:#758195;

            }
        }
        
    }
}

</style>